import { StyleSheet, Text, View, ScrollView, TouchableOpacity } from 'react-native';
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useRoute, useNavigation } from '@react-navigation/native';
import { NavBarHeader } from '~/components';
import { getDeviceDetails, changeDeviceApi } from '~/api/deviceApi';
import { onePx, px2dp, scale, width } from '~/utils/px2dp';

export default function ReplaceDeviceForm() {
    const { t } = useTranslation();
    const navigation: any = useNavigation();
    const router: any = useRoute();
    const { yyDevice_sn = '', device_sn = '' } = router.params || {};
    const [deviceInfo, setDeviceInfo] = useState<any>({});

    const getInfo = () => {
        getDeviceDetails({ device_sn: yyDevice_sn }).then((res) => {
            if (res.status == 1) {
                const data = res.data;
                data.num = data.device_sn.substring(device_sn.length - 3);
                setDeviceInfo(data);
            } else {
                if (res.msg == '设备不存在,请联系客服!') {
                    Toast.show({ content: t('AddDeviceScreen.t2'), layout: 'top' });
                } else {
                    Toast.show({ content: res.msg });
                }
            }
        });
    };

    // 替换设备
    const replaceDevice = () => {
        changeDeviceApi({ device_sn, device_id: deviceInfo.device_id }).then((res) => {
            if (res.code !== 200) {
                Toast.show({ content: res.msg, layout: 'top' });
            } else {
                Toast.show({ content: t('ReplaceDevice.t6'), layout: 'top' });
                navigation.goBack();
            }
        });
    };
    useEffect(() => {
        getInfo();
    }, []);

    return (
        <View style={styles.container}>
            <NavBarHeader title=" " />
            <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.contentStyle}>
                <Text style={styles.title}>{t('ReplaceDevice.t2')}</Text>
                <Text style={styles.tips}>{t('ReplaceDevice.t7')}</Text>
                <View style={styles.content}>
                    <View style={styles.listCard}>
                        <Text style={styles.t1}>
                            {t('ReplaceDevice.t3')}： {yyDevice_sn}
                        </Text>
                    </View>
                    <View style={styles.listCard}>
                        <Text style={styles.t1}>
                            {t('ReplaceDevice.t4')}： {device_sn}
                        </Text>
                    </View>
                </View>
                <TouchableOpacity style={[styles.bt]} onPress={replaceDevice}>
                    <Text style={styles.bt_text}>{t('ReplaceDevice.t5')}</Text>
                </TouchableOpacity>
            </ScrollView>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    title: {
        fontSize: scale(40),
        fontWeight: 'bold',
        color: '#111111',
    },
    contentStyle: {
        flexGrow: 1,
        marginHorizontal: px2dp(32),
        marginTop: px2dp(32),
    },
    tips: {
        color: '#666666',
        marginTop: scale(24),
        fontSize: scale(26),
    },
    content: {
        marginTop: '18%',
    },
    listCard: {
        backgroundColor: '#F4F4F4',
        padding: px2dp(24),
        borderRadius: px2dp(12),
        borderWidth: onePx,
        borderColor: '#eee',
        marginTop: px2dp(64),
    },
    t1: {
        color: '#000',
        fontSize: scale(28),
    },
    bt: {
        justifyContent: 'center',
        backgroundColor: 'rgba(23, 119, 255, 0.60)',
        height: px2dp(96),
        marginTop: px2dp(32),
        borderRadius: px2dp(16),
        alignItems: 'center',
        position: 'absolute',
        bottom: '20%',
        width: width - px2dp(48),
    },
    bt_text: {
        color: '#fff',
        fontSize: scale(32),
        fontWeight: 'bold',
    },
});
